<template>
  <div class="app-container">
    <el-card>
      <el-row class="flex items-center">
        <el-col class="flex" :span="10">
          <div class="flex flex-col justify-end">
            <p class="ft-12">总张数</p>
            <p class="mt-10 ft-20" style="font-weight: bold">
              {{ couponCount && couponCount.total }}
            </p>
          </div>
          <div class="flex flex-col items-center ml-20" style="width: 220px">
            <h3>好物特工平台二维码</h3>
            <img
              class="mt-10 mb-10"
              style="width: 160px; height: 160px"
              src="@/assets/hw_code.jpeg"
            />
            <el-button type="text" @click="downLoadQr">下载二维码</el-button>
          </div>
        </el-col>
        <el-col :span="14">
          <BarChart
            :title="title"
            :data-x="dataX"
            :data-y="dataY"
            :xAxis="xAxis"
            :showZoom="true"
          />
        </el-col>
      </el-row>
    </el-card>

    <el-card class="mt-20">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          :label="`未出库(${couponCount && couponCount.notLibraryTotal})`"
          name="no_stock"
        >
          <NoStockList v-if="activeName === 'no_stock'" @update="getCouponCount" />
        </el-tab-pane>
        <el-tab-pane
          :label="`未兑换(${couponCount && couponCount.notCashTotal})`"
          name="no_exchange"
        >
          <NoExchangeList v-if="activeName === 'no_exchange'" @update="getCouponCount" />
        </el-tab-pane>
        <el-tab-pane :label="`已兑换(${couponCount && couponCount.thenCashTotal})`" name="exchange">
          <ExchangeList v-if="activeName === 'exchange'" />
        </el-tab-pane>
        <el-tab-pane :label="`已作废(${couponCount && couponCount.invalidTotal})`" name="void">
          <VoidList v-if="activeName === 'void'" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { downLoadImg } from '@/hooks'
import VoidList from './components/VoidList.vue'
import NoStockList from './components/NoStockList.vue'
import ExchangeList from './components/ExchangeList.vue'
import NoExchangeList from './components/NoExchangeList.vue'
export default {
  name: 'CouponDetail',
  components: {
    VoidList,
    NoStockList,
    ExchangeList,
    NoExchangeList
  },
  data() {
    return {
      activeName: 'no_stock',
      title: {
        text: '近30天扫码兑换概况',
        left: '1%'
      },
      dataX: [],
      dataY: [],
      tooltip: {
        trigger: 'axis'
      },
      couponCount: {
        notLibraryTotal: 0,
        notCashTotal: 0,
        thenCashTotal: 0,
        invalidTotal: 0
      }
    }
  },
  computed: {
    id() {
      return this.$route.query?.id
    }
  },
  created() {
    this.getCouponCount()
    this.getActivityCount()
  },
  methods: {
    handleClick({ name }) {
      this.activeName = name
      this.getCouponCount()
    },
    // 获取礼品券统计数量
    async getCouponCount() {
      const { data } = await this.$http.coupon.voucherApi.getCouponCount(this.id)
      this.couponCount = data
    },
    // 获取30天兑换记录统计
    async getActivityCount() {
      const { data } = await this.$http.coupon.activityApi.getActivityCount({ couponId: this.id })
      const list = Object.entries(data)
        .map(item => {
          return {
            time: item[0],
            value: item[1]
          }
        })
        .sort((a, b) => {
          return this.$moment(a.time).unix() - this.$moment(b.time).unix()
        })
      this.dataX = list.map(item => item.time)
      this.dataY = [list.map(item => item.value)]
    },
    // 点击下载二维码
    downLoadQr() {
      downLoadImg(
        '好物特工平台二维码',
        'https://mecha-mall.oss-cn-shenzhen.aliyuncs.com/bizs/images/20220325/121c9412ab8b4069b965300c0104b44b.jpg'
      )
    }
  }
}
</script>
